<!-- 知识测评 -->
<template>
  <div class="page">
    <div class="head">
      <Title></Title>
      <van-search class="search" v-model="keyword" shape="round" background="#3975C6" placeholder="请输入知识测评名称关键字" />
      <van-tabs class="tabs" v-model="active" background="#3975C6" color="#fff" title-active-color="#fff"
        title-inactive-color="#dedede">
        <van-tab v-for="item in tabs" :key="item.name" :title="item.title" :name="item.name"></van-tab>
      </van-tabs>
    </div>

    <div class="tabs-list">
      <div class="item" v-for="item in assessmentList" :key="item.id">
        <div class="item-info">
          <div class="info-name">{{ item.title }}</div>
          <div class="info-status">
            <span v-if="item.status == -1" class="stu1">已缺考</span>
            <span v-else-if="item.status == 0" class="stu2">未开始</span>
            <span v-else-if="item.status == 1" class="stu3">未答题</span>
            <span v-else class="stu4">已答题：<span>90分</span></span>
          </div>
        </div>
        <div class="test-time">
          <p><span class="left mtop">考试开始时间:</span><span class="right mtop">{{ item.starttime }}</span></p>
          <p><span class="left">考试结束时间:</span><span class="right">{{ item.endtime }}</span></p>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#DEDEDE' }">
        </van-divider>
        <div class="item-ops">
          <span class="name">派发人：{{ item.name }}</span>
          <van-button type="info" size="small" v-if="item.status == 2">查看测评</van-button>
          <van-button type="info" size="small" v-else :disabled="item.status !== 1">开始答题</van-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Title from '@/components/commonTitle.vue'
export default {
  name: 'assessment',
  components: { Title, },
  data() {
    return {
      keyword: "",
      active: 'all',
      tabs: [
        { title: '全部（10）', name: 'all' },
        { title: '未答题（1）', name: 'unasq' },
        { title: '已答题（3）', name: 'asqed' },
        { title: '已缺考（6）', name: 'missing' },
      ],
      assessmentList: [
        { id: '1', title: '1知识测称名称 (2024年度)', status: -1, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷1', statustext: '已缺考' },
        { id: '2', title: '2知识测评名称名称 (2024年度)', status: 0, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷2', statustext: '未开始' },
        { id: '3', title: '3知识测评名称 (2024年度)', status: 1, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷3', statustext: '未答题' },
        { id: '4', title: '4知识测 (2024年度)', status: 2, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷4', statustext: '已答题', score: 90 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  height: 100%;

  .head {
    height: 310px;
  }

  /deep/ .search {
    height: 100px;

    .van-search__content {
      height: 60px;

      .van-field {
        display: flex;
        align-items: center;
        justify-content: center;

        .van-field__body {
          height: 100%;
        }
      }
    }
  }

  /deep/ .tabs {

    .van-tabs__wrap {
      height: 116px;

    }

    .van-tabs__nav--line {
      padding-bottom: 12px;
    }
  }

  .tabs-list {
    height: calc(100% - 430px);
    overflow: auto;

    .item {
      padding: 40px 30px;
      margin-top: 20px;
      background: #fff;

      .item-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-name {
          font-size: 28px;
          font-weight: 500;
          line-height: 42px;
          color: #333
        }

        .info-status {
          font-size: 24px;
          line-height: 36px;
          font-family: SourceHanSansCN, SourceHanSansCN;

          .stu1 {
            color: #C52026;
          }

          .stu2 {
            color: #EAA60F;
          }

          .stu3 {
            color: #397FF9;
          }

          .stu4 {
            color: #666;

            span {
              color: #397FF9;

            }
          }
        }
      }

      .test-time {
        p {
          display: flex;
          justify-content: space-between;

          font-size: 26px;
          line-height: 40px;
          font-weight: 400;

          .left {
            color: #5A4F4F;
          }

          .mtop {
            margin: 30px 0;
          }

          .right {
            color: #7F8389;
            font-size: 26px;
            font-family: SourceHanSansCN, SourceHanSansCN;
          }
        }
      }

      .item-ops {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          color: #7F8389;
          font-size: 26px;
          line-height: 40px;
        }

        /deep/ .van-button {
          background-color: #397FF9;
          height: 44px;
          font-size: 24px;
        }
      }
    }

    .item:last-child {
      margin-bottom: 20px;
    }
  }


}
</style>